<template>
  <view class="create-team-page">
    <!-- 导航栏 -->
    <tn-nav-bar
      fixed
      backgroundColor="#020303"
      :isBack="true"
      fontColor="#FFFFFF">
      <view class="nav-title">
        创建开黑组队
      </view>
    </tn-nav-bar>

    <view class="container" :style="{paddingTop: vuex_status_bar_height + 44 + 'px'}">
      <view class="form-box">
        <!-- 账号选择 -->
        <view class="form-item">
          <view class="form-label">
            <text>选择游戏账号</text>
            <text class="required">*</text>
          </view>
          <view class="account-selector" @tap="showAccountSelector">
            <view class="account-info" v-if="selectedAccount">
              <view class="account-details">
                <text class="account-name">{{selectedAccount.nickname}}</text>
                <view class="account-rank-server">
                  <text class="account-server">{{selectedAccount.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
                  <text class="account-rank">{{selectedAccount.rank}}</text>
                </view>
              </view>
            </view>
            <view class="empty-account" v-else>
              <text class="tn-icon-add"></text>
              <text>选择游戏账号</text>
            </view>
            <text class="tn-icon-right selector-arrow"></text>
          </view>
        </view>

        <!-- 队伍类型选择 -->
        <view class="form-item">
          <view class="form-label">
            <text>队伍类型</text>
            <text class="required">*</text>
          </view>
          <view class="type-selector">
            <view
              class="type-option"
              :class="{'active': teamType === 'fun'}"
              @tap="selectType('fun')"
            >
              <text class="type-icon tn-icon-emoji-good"></text>
              <text class="type-name">娱乐局</text>
            </view>
            <view
              class="type-option"
              :class="{'active': teamType === 'rank'}"
              @tap="selectType('rank')"
            >
              <text class="type-icon tn-icon-fire"></text>
              <text class="type-name">排位赛</text>
            </view>
            <view
              class="type-option"
              :class="{'active': teamType === 'social'}"
              @tap="selectType('social')"
            >
              <text class="type-icon tn-icon-like"></text>
              <text class="type-name">找对象</text>
            </view>
          </view>
        </view>

        <!-- 队伍标题 -->
        <view class="form-item">
          <view class="form-label">
            <text>队伍标题</text>
            <text class="required">*</text>
          </view>
          <view class="title-display-wrapper">
            <view class="title-display">
              <text>{{ teamTitle || '点击随机生成标题' }}</text>
            </view>
            <view class="random-btn" @tap="generateRandomTitle">
              <text class="tn-icon-shuffle"></text>
              <text>随机</text>
            </view>
          </view>
        </view>

        <!-- 文案选择预览 -->
        <view class="form-item">
          <view class="form-label">
            <text>队伍简介</text>
            <text class="required">*</text>
          </view>
          <view class="description-display-wrapper">
            <view class="description-display">
              <text>{{ teamDescription || '点击随机生成队伍简介' }}</text>
            </view>
            <view class="random-btn" @tap="generateRandomDescription">
              <text class="tn-icon-shuffle"></text>
              <text>随机</text>
            </view>
          </view>
        </view>

        <!-- 位置选择组件 -->
        <view class="form-item">
          <view class="form-label">
            <text>想玩的位置</text>
            <text class="required">*</text>
          </view>
          <view class="position-select-wrapper">
            <view
              v-for="(position, index) in positionList"
              :key="index"
              class="position-item"
              :class="{active: selectedPositionIndex === index}"
              @tap="selectPosition(index)"
            >
              <text :class="position.icon"></text>
              <text>{{position.name}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 提供底部占位，确保内容不被底部按钮遮挡 -->
      <view class="bottom-placeholder"></view>
    </view>

    <!-- 底部固定的提交按钮 -->
    <view class="submit-btn-container">
      <view class="submit-btn" @tap="submitForm" :class="{'disabled': !canSubmit}">创建队伍</view>
    </view>

    <!-- 账号选择弹窗 -->
    <tn-popup
      mode="bottom"
      v-model="showAccountSelectorPopup"
      :border-radius="20"
      backgroundColor="#202020"
      @close="hideAccountSelector"
    >
      <view class="account-popup">
        <view class="account-popup-header">
          <text class="popup-title">选择游戏账号</text>
          <view class="popup-actions">
            <text class="tn-icon-refresh refresh-icon" @tap="loadGameAccounts"></text>
            <text class="tn-icon-close" @tap="hideAccountSelector"></text>
          </view>
        </view>

        <!-- 账号列表 -->
        <view class="account-list">
          <!-- 加载中状态 -->
          <view class="loading-wrapper" v-if="loading">
            <text class="tn-icon-loading loading-icon"></text>
            <text class="loading-text">账号加载中...</text>
          </view>

          <!-- 无数据状态 -->
          <view class="empty-wrapper" v-else-if="gameAccounts.length === 0">
            <text class="tn-icon-info empty-icon"></text>
            <text class="empty-text">您还没有游戏账号</text>
            <text class="empty-desc">请添加游戏账号后创建组队</text>
          </view>

          <!-- 账号列表项，添加完整的账号状态显示 -->
          <view
            class="account-item"
            v-else
            v-for="(account, index) in gameAccounts"
            :key="index"
            :class="{
              'active': selectedAccount && selectedAccount.id === account.id,
              'disabled': account.auditStatus === 2
            }"
            @tap="selectAccount(account)"
          >
            <view class="item-info">
              <text class="item-name">{{account.nickname}}</text>
              <view class="item-game-rank">
                <text class="item-server">{{account.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
                <text class="item-rank">{{account.rank}}</text>
                <!-- 状态标签 -->
                <text class="item-status" :class="{
                  'status-pending': account.auditStatus === 0,
                  'status-approved': account.auditStatus === 1,
                  'status-rejected': account.auditStatus === 2
                }">
                  {{account.auditStatus === 0 ? '待审核' : account.auditStatus === 1 ? '已通过' : '已拒绝'}}
                </text>
              </view>
            </view>
            <view class="item-actions">
              <text class="tn-icon-check item-check" v-if="selectedAccount && selectedAccount.id === account.id"></text>
              <!-- 根据审核状态显示不同的按钮 -->
              <text
                v-if="account.auditStatus === 1"
                class="tn-icon-edit item-edit"
                @tap.stop="editGameAccount(account)"
              ></text>
              <text
                v-else
                class="tn-icon-refresh item-resubmit"
                @tap.stop="resubmitGameAccount(account)"
              ></text>
            </view>
          </view>
        </view>

        <view class="account-popup-footer">
          <button class="add-account-btn" @tap="addGameAccount">
            <text class="tn-icon-add"></text>
            添加游戏账号
          </button>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import api from '@/api/index.js';
import { getRankNameById } from '@/utils/constants.js';

export default {
  data() {
    return {
      // 表单数据
      selectedAccount: null,
      teamType: 'rank', // 默认是排位赛
      teamTitle: '',
      teamDescription: '',
      // 新增：位置选择
      positionList: [
        { name: '上单', icon: 'tn-icon-flag' },
        { name: '打野', icon: 'tn-icon-tree' },
        { name: '中单', icon: 'tn-icon-star' },
        { name: '下路', icon: 'tn-icon-game' },
        { name: '辅助', icon: 'tn-icon-sword' }
      ],
      selectedPositionIndex: -1, // 选中的位置索引，-1表示未选择

      // 弹窗控制
      showAccountSelectorPopup: false,

      // 随机文案
      titleTemplates: [
        '找大神一起开黑',
        '王者荣耀开黑车队',
        '来一起愉快开黑',
        '开黑车队，招募队友',
        '缺人上分',
        '排位找固定队友',
        '新赛季冲分',
        '开黑车队',
        '王者荣耀车队招募',
        '开黑局',
      ],

      descriptionTemplates: [
        '来个大神带带我，线上五排，麦克风交流',
        '冲刺荣耀，缺位置请+我微信',
        '一起打游戏一起笑，缺个上单来当炮',
        '找几个实力不错的队友一起上分',
        '新赛季冲分，欢迎大神加入',
        '小姐姐车队，欢迎声音好听的小哥哥上车',
        '萌新上路，求大神带飞',
        '配合默契，闪现交给我',
        '上分车队，要求有麦，配合好',
        '一起愉快游戏，不急不怒不骂人',
        '欢乐五排，不喷不坑',
        '来个打野厉害的，上分稳稳的',
        '声音好听的优先，有麦最好',
        '无脑开团，就是干，不怕送',
        '操作六的不来，意识好的来',
        '休闲局，菜鸡互啄也不嫌弃',
        '排位车队，有麦更好，一起交流',
        '来个大腿抱一抱，上分带一带',
        '只要你活跃，萌新也可以',
        '喜欢打团，不怕送的来',
        '开黑就是为了好玩，不生气',
        '来个会秀的射手，保你C全场',
        '实力很重要，但更看重配合',
        '看脸组队，头像好看的来',
        '求带，菜是原罪但我想变强',
        '找会玩中路的，其他位置也行',
        '来个会玩边路的，中路我C',
        '一起上车，不要沉默，有麦最好',
        '稳健发育，团战C位，招辅助和打野',
        '上分开黑，有语音，交流配合',
        '找固定车队，长期开黑',
        '游戏互相学习，不喷不骂',
        '排位车队，一起冲分',
        '玩得开心最重要，菜鸡互啄',
        '青铜车队，只为快乐',
        '大神带飞，包上分',
        '缺辅助，保证不会坑',
        '不会送，有意识，配合好',
        '会玩法师，找个战士带带',
        '上单法王，缺打野辅助',
        '会玩多个位置，看队伍需要',
        '开黑娱乐，不要太严肃',
        '声音甜美小姐姐，缺几个大哥哥',
        '王者车队，带萌新躺赢',
        '微信区找固定车队，长期开黑',
        '不要沉默，要会交流，有麦更好',
        '来个技术好的辅助，C位已就位',
        '组织灵活，打团利索，来就对了',
        '擅长逆风翻盘，不会轻易投降',
        '快乐游戏，不在乎输赢',
        '会玩多个英雄，适应性强'
      ],

      // 游戏账号数据
      gameAccounts: [],
      loading: false, // 加载状态

    }
  },
  computed: {
    vuex_status_bar_height() {
      return uni.getSystemInfoSync().statusBarHeight || 0;
    },
    canSubmit() {
      return this.selectedAccount && this.teamTitle && this.teamDescription && this.selectedPositionIndex !== -1;
    }
  },

  onShow() {
    // 页面显示时加载账号数据
    this.loadGameAccounts();
  },
  methods: {
    // 加载游戏账号列表
    loadGameAccounts() {
      this.loading = true;

      // 使用getUserGameAccounts接口获取用户的所有账号列表
      api.game.getUserGameAccounts()
        .then(res => {
          if (res && res.length > 0) {
            // 格式化账号数据
            this.gameAccounts = res.map(item => {
              return {
                id: item.id,
                gameId: item.gameId,
                nickname: item.gameId, // 使用游戏ID作为昵称
                serverType: item.areaType === 1 ? 'wechat' : 'qq',
                rank: getRankNameById(item.rankLevel),
                contact: item.contact,
                screenshot: item.screenshot,
                auditStatus: item.auditStatus, // 保存审核状态
                isDefault: item.isDefault === 1, // 是否为默认账号
                originalData: item // 保存原始数据
              };
            });

            // 首先按默认状态排序，然后按审核状态排序
            this.gameAccounts.sort((a, b) => {
              // 默认账号优先
              if (a.isDefault && !b.isDefault) {
                return -1;
              } else if (!a.isDefault && b.isDefault) {
                return 1;
              }
              // 然后是审核通过的
              else if (a.auditStatus === 1 && b.auditStatus !== 1) {
                return -1;
              } else if (a.auditStatus !== 1 && b.auditStatus === 1) {
                return 1;
              }
              // 如果状态相同，按ID排序
              return b.id - a.id;
            });

            // 如果有默认账号，则自动选择
            const defaultAccount = this.gameAccounts.find(acc => acc.isDefault);
            if (defaultAccount && !this.selectedAccount) {
              this.selectedAccount = defaultAccount;
            }
            // 否则选择第一个审核通过的账号
            else if (!this.selectedAccount) {
              const approvedAccount = this.gameAccounts.find(acc => acc.auditStatus === 1);
              if (approvedAccount) {
                this.selectedAccount = approvedAccount;
              }
            }

            console.log('加载游戏账号成功:', this.gameAccounts);
          } else {
            this.gameAccounts = [];
          }
        })
        .catch(err => {
          console.error('获取游戏账号列表失败:', err);
          uni.showToast({
            title: '获取账号列表失败',
            icon: 'none'
          });
          this.gameAccounts = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 选择账号相关
    showAccountSelector() {
      // 打开选择器时加载账号列表
      this.loading = true;
      this.showAccountSelectorPopup = true;

      // 加载账号列表
      this.loadGameAccounts();
    },

    hideAccountSelector() {
      this.showAccountSelectorPopup = false;
    },

    selectAccount(account) {
      // 检查账号审核状态，如果是已拒绝状态，先关闭弹窗再显示提示
      if (account.auditStatus === 2) {
        this.hideAccountSelector();
        // 延迟显示提示，确保弹窗完全关闭
        setTimeout(() => {
          uni.showToast({
            title: '该账号审核未通过，无法使用',
            icon: 'none',
            duration: 2000
          });
        }, 300);
        return;
      }

      this.selectedAccount = account;
      this.hideAccountSelector();

      // 如果标题为空，则自动生成一个标题
      if (!this.teamTitle) {
        this.generateRandomTitle();
      }

      // 调用API将该账号设置为默认账号
      api.game.switchDefaultAccount(account.id)
        .then(() => {
          console.log('设置默认账号成功:', account.id);
          // 更新本地账号数据中的默认状态
          this.gameAccounts.forEach(acc => {
            acc.isDefault = acc.id === account.id;
          });
        })
        .catch(err => {
          console.error('设置默认账号失败:', err);
          // 失败时不影响当前选择，仅记录日志
        });
    },

    addGameAccount() {
      uni.navigateTo({
        url: '/pages/team/add-account'
      });
    },

    // 编辑游戏账号
    editGameAccount(account) {
      uni.navigateTo({
        url: `/pages/team/add-account?mode=edit&id=${account.id}`
      });
    },

    // 重新提交游戏账号
    resubmitGameAccount(account) {
      uni.navigateTo({
        url: `/pages/team/add-account?mode=resubmit&id=${account.id}`
      });
    },

    // 选择队伍类型
    selectType(type) {
      this.teamType = type;
      // 可以根据不同类型调整标题模板
      this.generateRandomTitle();
    },

    // 生成随机标题
    generateRandomTitle() {
      if (!this.selectedAccount) {
        uni.showToast({
          title: '请先选择游戏账号',
          icon: 'none'
        });
        return;
      }

      // 获取随机模板
      const templateIndex = Math.floor(Math.random() * this.titleTemplates.length);
      this.teamTitle = this.titleTemplates[templateIndex];
    },

    // 生成随机描述
    generateRandomDescription() {
      // 直接从模板中选择一个
      const index = Math.floor(Math.random() * this.descriptionTemplates.length);
      this.teamDescription = this.descriptionTemplates[index];
    },

    // 选择位置
    selectPosition(index) {
      this.selectedPositionIndex = this.selectedPositionIndex === index ? -1 : index;
    },

    // 获取选中的位置
    getSelectedPosition() {
      return this.selectedPositionIndex !== -1 ? this.positionList[this.selectedPositionIndex].name : '';
    },

    // 提交表单
    submitForm() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }

      // 获取位置映射
      const positionMap = {
        0: 1, // 上单
        1: 5, // 打野
        2: 2, // 中单
        3: 3, // 下路
        4: 4  // 辅助
      };

      // 获取队伍类型映射
      const teamTypeMap = {
        'fun': 1, // 娱乐局
        'rank': 2, // 排位赛
        'social': 3 // 找对象
      };

      // 组装请求数据，按照后端 AppGameKingTeamCreateReqVO 的格式
      const requestData = {
        accountId: this.selectedAccount.id, // 王者账号ID
        teamType: teamTypeMap[this.teamType], // 队伍类型转换为数值
        title: this.teamTitle, // 队伍标题
        description: this.teamDescription, // 队伍简介
        position: positionMap[this.selectedPositionIndex] // 位置编号
      };

      console.log('提交表单数据:', requestData);

      // 显示加载状态
      uni.showLoading({
        title: '创建中...',
        mask: true
      });

      // 调用后端接口创建队伍
      api.game.createGameKingTeam(requestData)
        .then(res => {
          console.log('创建队伍成功:', res);

          // 隐藏加载状态
          uni.hideLoading();

          // 显示成功提示
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          });

          // 跳转到队伍页面
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch(err => {
          console.error('创建队伍失败:', err);

          // 隐藏加载状态
          uni.hideLoading();

          // 显示错误信息
          uni.showToast({
            title: err.msg || '创建失败，请重试',
            icon: 'none'
          });
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.create-team-page {
  background-color: #020303;
  min-height: 100vh;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #e0e0e0;
  text-align: center;
}

.container {
  padding: 30rpx;
}

.form-box {
  background-color: #121212;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  text {
    font-size: 28rpx;
    color: #e0e0e0;
    font-weight: 500;
  }

  .required {
    color: #ff4d4f;
    margin-left: 10rpx;
  }

  .tip {
    font-size: 24rpx;
    color: #8c8c8c;
    margin-left: 20rpx;
    font-weight: normal;
  }
}

/* 账号选择器样式 */
.account-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #202020;
  border-radius: 10rpx;
  min-height: 120rpx;

  .account-info {
    display: flex;
    align-items: center;
    flex: 1;

    .account-details {
      .account-name {
        font-size: 28rpx;
        color: #e0e0e0;
        margin-bottom: 16rpx;
        display: block;
      }

      .account-rank-server {
        display: flex;
        align-items: center;

        .account-server {
          font-size: 22rpx;
          color: #8c8c8c;
          background-color: #303030;
          padding: 4rpx 10rpx;
          border-radius: 4rpx;
          margin-right: 16rpx;
        }

        .account-rank {
          font-size: 22rpx;
          color: #B3F73C;
        }
      }
    }
  }

  .empty-account {
    display: flex;
    align-items: center;
    flex: 1;
    color: #8c8c8c;

    .tn-icon-add {
      font-size: 32rpx;
      margin-right: 10rpx;
    }
  }

  .selector-arrow {
    color: #8c8c8c;
    font-size: 32rpx;
  }
}

/* 类型选择器样式 */
.type-selector {
  display: flex;
  justify-content: space-between;

  .type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    background-color: #202020;
    border-radius: 10rpx;
    margin: 0 10rpx;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    &.active {
      background-color: #B3F73C;

      .type-icon, .type-name {
        color: #000000;
      }
    }

    .type-icon {
      font-size: 40rpx;
      color: #e0e0e0;
      margin-bottom: 10rpx;
    }

    .type-name {
      font-size: 24rpx;
      color: #e0e0e0;
    }
  }
}

/* 标题显示样式 */
.title-display-wrapper {
  display: flex;
  align-items: center;
  background-color: #202020;
  border-radius: 10rpx;
  padding: 0 20rpx;
  height: 90rpx;

  .title-display {
    flex: 1;
    height: 90rpx;
    color: #e0e0e0;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #e0e0e0;
    }
  }

  .random-btn {
    display: flex;
    align-items: center;
    background-color: rgba(179, 247, 60, 0.1);
    height: 60rpx;
    padding: 0 20rpx;
    border-radius: 30rpx;
    color: #B3F73C;

    .tn-icon-shuffle {
      margin-right: 10rpx;
      font-size: 24rpx;
    }

    text {
      font-size: 24rpx;
      color: #B3F73C;
    }
  }
}

/* 描述显示样式 */
.description-display-wrapper {
  display: flex;
  background-color: #202020;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 10rpx;

  .description-display {
    flex: 1;
    min-height: 120rpx;
    max-height: 200rpx;
    color: #e0e0e0;
    font-size: 28rpx;
    overflow: auto;

    text {
      color: #e0e0e0;
    }
  }

  .random-btn {
    display: flex;
    align-items: center;
    background-color: rgba(179, 247, 60, 0.1);
    height: 60rpx;
    padding: 0 20rpx;
    border-radius: 30rpx;
    color: #B3F73C;
    align-self: flex-start;

    .tn-icon-shuffle {
      margin-right: 10rpx;
      font-size: 24rpx;
    }

    text {
      font-size: 24rpx;
      color: #B3F73C;
    }
  }
}

/* 位置选择样式 */
.position-select-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 15rpx;

  .position-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110rpx;
    height: 110rpx;
    border-radius: 10rpx;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;

    &.active {
      background-color: rgba(11, 230, 96, 0.2);
      color: #0be660;
    }

    text:first-child {
      font-size: 40rpx;
      margin-bottom: 10rpx;
    }

    text:last-child {
      font-size: 24rpx;
    }
  }
}

/* 提交按钮 */
.submit-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #020303;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  background-color: #B3F73C;
  color: #000000;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

/* 底部占位符 */
.bottom-placeholder {
  height: 120rpx;
}

/* 账号弹窗样式 */
.account-popup {
  padding-bottom: env(safe-area-inset-bottom);

  .account-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: none;
    margin-bottom: 10rpx;

    .popup-title {
      font-size: 32rpx;
      color: #FFFFFF;
      font-weight: 500;
    }

    .popup-actions {
      display: flex;
      align-items: center;

      .refresh-icon {
        font-size: 40rpx;
        color: #8c8c8c;
        margin-right: 20rpx;
        transition: transform 0.3s ease;

        &:active {
          transform: rotate(180deg);
          color: #B3F73C;
        }
      }

      .tn-icon-close {
        font-size: 40rpx;
        color: #8c8c8c;
      }
    }
  }

  .account-list {
    padding: 20rpx 0;
    max-height: 45vh;
    overflow-y: auto;
    min-height: 300rpx;

    /* 加载状态样式 */
    .loading-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 0;

      .loading-icon {
        font-size: 80rpx;
        color: #007AFF;
        margin-bottom: 20rpx;
        animation: rotate 1.5s linear infinite;
      }

      .loading-text {
        font-size: 28rpx;
        color: #8c8c8c;
      }

      @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    }

    /* 空状态样式 */
    .empty-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 0;

      .empty-icon {
        font-size: 80rpx;
        color: #8c8c8c;
        margin-bottom: 20rpx;
      }

      .empty-text {
        font-size: 32rpx;
        color: #e0e0e0;
        margin-bottom: 10rpx;
      }

      .empty-desc {
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }

    /* 账号项样式 */
    .account-item {
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      border-bottom: none;
      margin-bottom: 10rpx;
      background-color: rgba(255, 255, 255, 0.03);
      border-radius: 8rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;

      &:last-child {
        border-bottom: none;
      }

      &.active {
        background-color: rgba(179, 247, 60, 0.15);
        border: 1rpx solid rgba(179, 247, 60, 0.3);
      }

      &.disabled {
        opacity: 0.6;
        background-color: rgba(255, 107, 107, 0.05);
        cursor: not-allowed;

        &:active {
          background-color: rgba(255, 107, 107, 0.05);
        }
      }

      .item-info {
        flex: 1;

        .item-name {
          font-size: 28rpx;
          color: #e0e0e0;
          margin-bottom: 10rpx;
          display: block;
        }

        .item-game-rank {
          display: flex;
          align-items: center;

          .item-server {
            font-size: 22rpx;
            color: #8c8c8c;
            background-color: #303030;
            padding: 4rpx 10rpx;
            border-radius: 4rpx;
            margin-right: 16rpx;
          }

          .item-rank {
            font-size: 22rpx;
            color: #B3F73C;
          }

          .item-status {
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 12rpx;
            margin-left: 12rpx;

            &.status-pending {
              color: #FF9900;
              background-color: rgba(255, 153, 0, 0.15);
              border: 1rpx solid rgba(255, 153, 0, 0.3);
            }

            &.status-approved {
              color: #00CC66;
              background-color: rgba(0, 204, 102, 0.15);
              border: 1rpx solid rgba(0, 204, 102, 0.3);
            }

            &.status-rejected {
              color: #FF6B6B;
              background-color: rgba(255, 107, 107, 0.15);
              border: 1rpx solid rgba(255, 107, 107, 0.3);
            }
          }
        }
      }

      .item-actions {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .item-check {
          color: #B3F73C;
          font-size: 32rpx;
        }

        .item-edit {
          font-size: 28rpx;
          color: #B3F73C;
          padding: 8rpx;
          border-radius: 4rpx;
          background-color: rgba(179, 247, 60, 0.1);
        }

        .item-resubmit {
          font-size: 28rpx;
          color: #FF9900;
          padding: 8rpx;
          border-radius: 4rpx;
          background-color: rgba(255, 153, 0, 0.1);
        }
      }
    }
  }

  .account-popup-footer {
    padding: 20rpx 30rpx;
    border-top: none;
    padding-top: 10rpx;

    .add-account-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(179, 247, 60, 0.1);
      border-radius: 10rpx;
      height: 90rpx;
      color: #B3F73C;
      font-size: 28rpx;

      .tn-icon-add {
        margin-right: 10rpx;
      }
    }
  }
}
</style>
